import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:icooker/configs/app_configs.dart';
import 'package:icooker/configs/theme/themes.dart';
import 'package:icooker/providers/theme_provider.dart';
import 'package:kasax/kasax.dart';
import 'package:provider/provider.dart';

/// 抽屉
class MainDrawer extends StatefulWidget {
  const MainDrawer({Key? key}) : super(key: key);

  @override
  _MainDrawerState createState() => _MainDrawerState();
}

class _MainDrawerState extends State<MainDrawer> {
  @override
  Widget build(BuildContext context) {
    var themeProvider = Provider.of<AppThemeProvider>(context);
    print("themeProvider = $themeProvider");
    return Drawer(
      child: ListView(
        padding: EdgeInsets.zero,
        children: [
          UserAccountsDrawerHeader(
            decoration: BoxDecoration(
                image: DecorationImage(
                    fit: BoxFit.cover,
                    image: AssetImage("assets/images/bar03.png"))),
            accountName: Text(
              "咪咕",
              style: TextStyle(color: Theme.of(context).primaryColor),
            ),
            accountEmail: Text("migu@gmail.com",
                style: TextStyle(color: Theme.of(context).primaryColor)),
            currentAccountPicture: CircleAvatar(
              backgroundImage: AssetImage("assets/images/avatar.jpg"),
            ),
          ),
          ListTile(
            leading: Icon(Icons.settings),
            trailing: Icon(Icons.arrow_right),
            title: Text("主题设置"),
            onTap: () {
              // 修改主题
              // 弹出dialog
              showDialog(
                  context: context,
                  builder: (context) {
                    return ThemeDialog();
                  }).then((value) {
                if (value != null) {
                  if (value is Map) {
                    var themeName = value['themeName'];
                    themeProvider.setTheme(themeName);
                    Navigator.pop(context);
                  }
                }
              });
            },
          )
        ],
      ),
    );
  }
}

class ThemeDialog extends Dialog {
  @override
  EdgeInsets? get insetPadding => EdgeInsets.zero;

  @override
  Widget build(BuildContext context) {
    return Material(
      type: MaterialType.transparency,
      child: Center(
        child: Container(
          margin: EdgeInsets.only(
              left: ScreenUtil().setWidth(10),
              right: ScreenUtil().setWidth(10)),
          decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(ScreenUtil().setWidth(12)),
              color: Colors.white),
          padding: EdgeInsets.all(ScreenUtil().setWidth(15)),
          child: Column(
            mainAxisSize: MainAxisSize.min, // 这里让控件高度可以自适应
            children: [
              GridView.builder(
                shrinkWrap: true,
                gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                    crossAxisCount: 4,
                    mainAxisSpacing: ScreenUtil().setWidth(3),
                    crossAxisSpacing: ScreenUtil().setHeight(3)),
                itemBuilder: (context, index) {
                  return itemTheme(context, index);
                },
                itemCount: themeColor.length,
              )
            ],
          ),
        ),
      ),
    );
  }

  Widget itemTheme(BuildContext context, int index) {
    var themeInfo = themeColor.entries.elementAt(index);
    return GestureDetector(
      onTap: () {
        var themeKey = themeInfo.key;
        cacheThemeData(themeKey);
        Navigator.pop(context, {"themeName": themeKey});
      },
      child: Container(
        decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(12),
            color: themeInfo.value['primaryColor']),
      ),
    );
  }

  void cacheThemeData(themeKey) async {
    SPUtils.put(AppConfigs.KEY_THEME_DATA, themeKey);
  }
}
